<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>系统内置登录页面</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width" />
<base href="/" />
<link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
.clickDisabled {  } 
</style>
</head>
<body>
	<h1>Demo</h1>
	<div>http://www.runoob.com/bootstrap4/bootstrap4-jumbotron.html
	https://getbootstrap.com/docs/4.1/components/card/</div>
	<div class="container-fuile">
		<div>
			<h2>表单登录</h2>
			<form action="/author/form" method="post">
				<label>用户</label><input name="username"> <label>密码</label><input
					name="password"> <label>验证码</label><input
					name="imageCode"><img alt="s" src="/auth/validate/image">
				<label><input type="checkbox" name="remember-me">记住我,一周免登陆</label>
				<input type="submit" value="登录">
			</form>
		</div>
		<div>
			<h2>短信登录</h2>
			<form action="/author/mobile" method="post">
				<div>
					<label>手机号</label> <input name="mobile" value="15501283722">
				</div>
				<div>
					<label>验证码</label> <input name="smsCode">
					<a id="sendMobileValidate" href="javascript:void(0);">发送验证码</a>
				</div>
				<div>
					<img alt="s" src="/auth/validate/image"> <label><input
						type="checkbox" name="remember-me">记住我,一周免登陆</label>
				</div>
				<input type="submit" value="登录">
			</form>
		</div>
		<div>
			<h2>社交登录</h2>
				<div>
					<a  href="/login/qq">QQ登录</a><br/>
					<a  href="/connect/qq">QQ绑定 必须是post请求</a>
					<a  href="/connect/qq">QQ解绑 必须是delete请求</a>
				</div>
				<div>
					<a  href="/login/weixin">微信登录</a>
					<a  href="/connect/weixin">微信绑定  必须是post请求</a>
					<a  href="/connect/weixin">微信绑定 必须是delete请求</a>
				</div>
		</div>
	</div>
	<script type="text/javascript">
	$(function(){
		//短信验证码发送
		$("#sendMobileValidate").click(function(){
			if($("#sendMobileValidate").hasClass("clickDisabled")){
				return;
			}
			var url="/auth/validate/sms";
			var data = {"mobile": $("input[name=mobile]").val()};
			$.get(url,data,function(result){
				$("#sendMobileValidate").addClass("clickDisabled");
				timedCount();
			})
		});
	})
	
	var c=60;
	var t;
	function timedCount()
	 {
		if(c<0){
			$("#sendMobileValidate").toggleClass("clickDisabled");
	 		$('#sendMobileValidate').text("重新发送");
			return;
		}
	 	$('#sendMobileValidate').text(c+"秒后重新发送");
	 	c=c-1
	 	t=setTimeout("timedCount()",1000);
	 }
	</script>
</body>
</html>